<template>
  <!-- <span>小区总水量分析</span> -->
  <div class="flCommunityWaterAnalysis" :class="{'flCommunityWaterAnalysisFlex':treeShowOrClose}">

    <!-- 左边树 -->
    <!-- 树形图 -->
    <!-- 右边list -->
    <button class="leftTreetitleButton" @click="treeShow" v-show="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-show="treeShowOrClose">

      <waterMeterLeftTree class="waterMeterLeftTree" @getTreeDefaultId="getTreeDefaultId" @treeIdFn="treeIdFn" treeId="1" @clickClose="clickClose" />
    </div>

    <div :class="[
            { rightcontant: treeShowOrClose },
            { rightcontant2: !treeShowOrClose },
        ]">
      <!-- 搜索框-->
      <div style="padding: 0px 0px;">
        <el-tabs v-model="activeName" @tab-click="handleClick" :style="treeShowOrClose ? 'padding-left:10px' : 'padding-left:40px'">
          <el-tab-pane label="小区总水量分析--日表" name="first">
            <logoIndex :areaCodeq="oneCode" :defaultTreeId="defaultTreeId" />
          </el-tab-pane>
          <el-tab-pane label="小区总水量分析--月表" name="second">
            <waterIndex :areaCodeq="secondCode" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import logoIndex from './compotents/flCommunityDayWaterAnalysis'
import waterIndex from './compotents/flCommunityMonthWaterAnalysis'
import waterMeterLeftTree from '@/views/components/FLPage/waterMeterLeftTree'
export default {
  components: {
    logoIndex,
    waterIndex,
    waterMeterLeftTree,
  },
  name: 'flParameterize',
  // props:["areaCode"],
  data() {
    return {
      treeId: '1',
      treeShowOrClose: false,
      areaCodeq: '',
      areaCodep: '',
      activeName: 'first',
      firstKey: 0,
      twoKey: 0,
      threeKey: 0,
      oTabName: '',
      defaultTreeId: '',
      areaCodeqMonthCode: '',
      secondCode: '',
      oneCode: '',
    }
  },
  methods: {
    // 左侧小区默认第一个
    areaIf(treeId) {},
    getTreeDefaultId(treeId) {
      // this.areaCodeq = this.defaultTreeId = treeId
    },
    treeIdFn(treeId) {
      this.areaCodeq = treeId
    },
    clickClose(res) {
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    treeShow() {
      //   this.treeShowOrClose = this.oTabName == 'second' ? true : false
      this.treeShowOrClose = !this.treeShowOrClose
    },
    handleClick({ name = '' }, event) {
      this.oTabName = name || this.activeName
      if (name == 'first') {
        this.oneCode = this.areaCodeq
      } else {
        this.secondCode = this.areaCodeq
      }
      // this.treeShowOrClose = name == 'second' ? true : false
      // this.treeShowOrClose = true
    },
  },
  watch: {
    areaCodeq(newValue) {
      if (this.oTabName == 'first' || this.activeName == 'first') {
        this.oneCode = newValue
      } else {
        this.secondCode = newValue
      }
      this.areaCodeq = newValue
      this.firstKey = this.firstKey + 1
      this.twoKey = this.twoKey + 1
      this.threeKey = this.threeKey + 1
    },
  },
}
</script>


<style lang="scss" scoped>
.flCommunityWaterAnalysisFlex {
  display: flex;
}
.flCommunityWaterAnalysis {
  .tabsSmall {
    padding-left: 10px;
  }
  .tabsBig {
    padding-left: 40px;
  }
  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
    position: absolute;
    left: 0;
    top: 40px;
  }
  .leftTree {
    width: 14.2%;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }
  .rightcontant {
    display: flex;
    flex-direction: column;
    width: 85.8%;
    .flParameterize {
      display: flex;
      .leftTreetitleButton {
        margin-top: 10px;
        border: 0;
        height: 32px;
      }
      .leftTree {
        width: 14.2%;
        .waterMeterLeftTree {
          border: 1px soild #ccc;
        }
      }
      .rightcontant {
        width: 85.8%;
        /deep/ .el-table--mini {
          .gutter {
            display: table-cell !important;
          }
          .el-table__body-wrapper {
            .el-table__body {
              tbody {
                .el-table__row {
                  height: 47px !important;
                }
              }
            }
          }
        }
        .right_row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          position: relative;
          .leftButtons {
            // width: 300px;
            display: flex;
            .meterExchangeData {
              // margin-right: 10px;
            }
          }
          .centerButtons {
            flex: 1;
          }
          .rightButtons {
            // position: absolute;
            padding-left: 50px;
            display: flex;
            flex-direction: row;
            justify-content: end;
            // right: 0;
            width: 300px;
          }
          // .hunt_sunS_F{
          //   float: right;
          //   margin: 10px;
          // }
        }
        .do {
          display: flex;
        }
        .pagination {
          margin-top: 15px;
        }
      }
      .rightcontant2 {
        width: 97%;
        /deep/.tabs {
          padding-left: 40px;
        }
        /deep/ .el-table--mini {
          .gutter {
            display: table-cell !important;
          }
          .el-table__body-wrapper {
            .el-table__body {
              tbody {
                .el-table__row {
                  height: 47px !important;
                }
              }
            }
          }
        }
        .right_row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          // position: relative;
          .leftButtons {
            // width: 300px;
            display: flex;
            .meterExchangeData {
              margin-right: 10px;
            }
            // margin-left: 10px;
          }
          .centerButtons {
            flex: 1;
          }
          .rightButtons {
            // position: absolute;
            // right: 0;
            padding-left: 50px;
            width: 300px;
          }
          .hunt_sunS_F {
            float: right;
            margin: 10px;
          }
        }
        .do {
          display: flex;
        }
        .pagination {
          text-align: left;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
